import React, { useEffect, useState } from "react";
import "./TodoList.css";
import TodoHeader from "./TodoHeader/TodoHeader";
import TodoMain from "./TodoMain/TodoMain";
import TodoFooter from "./TodoFooter/TodoFooter";
import { v4 as uuidv4 } from "uuid";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import request from '../../utils/request';


// NProgress.start();

// setTimeout(() => {
//   NProgress.done();
// }, 2000)

export default function TodoList() {
  //声明一个状态 任务列表
  let [todos, setTodos] = useState([
    
  ]);

  //声明一个函数, 用来新增任务
  let addTodo = async (title) => {
    //发送请求 新增任务
    try {
      let data = await request.post("/todo", {
        title: title,
        done: false,
      });
      //更新状态
      setTodos([...todos, data]);
    } catch (e) {
      //抛出错误, 整个函数将返回失败的 promise 对象
      throw '失败';
    }
  };

  //声明函数用来改变任务的完成状态
  let checkTodo = async (id, done) => {
    //发送 AJAX 请求
    await request.patch(`/todo/${id}`, {done: done});

    //遍历数组更新数组某个数据的值
    let newTodos = todos.map((item) => {
      //判断
      if (item.id === id) {
        //更新完成状态
        item.done = done;
      }
      //返回 item 的值
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //声明函数删除某个任务
  let removeTodo = async (id) => {
    //发送 AJAX 请求
    await request.delete(`/todo/${id}`);
    //简写
    let newTodos = todos.filter((item) => item.id !== id);
    //更新状态
    setTodos(newTodos);
  };

  //声明函数批量更新任务的完成状态
  let checkAllTodo = (done) => {
    //创建新的 Todos 数组
    let newTodos = todos.map((item) => {
      //修改任务的完成状态值
      item.done = done;
      //返回
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //移除已经完成的任务
  let removeDoneTodo = () => {
    //创建新的 Todos
    let newTodos = todos.filter((item) => !item.done);
    //更新状态
    setTodos(newTodos);
  };

  //测试
  useEffect(() => {
    //测试新增任务的函数
    // addTodo('hello');
    //测试更新任务完成状态
    // checkTodo(1, true);
    //测试删除任务
    // removeTodo(2);
    //
    // checkAllTodo(true);
    //测试移除已经完成的任务
    // removeDoneTodo();
  }, []);

  //组件挂载完成 发送AJAX请求获取初始化数据
  useEffect(() => {
    //声明一个函数
    let fetchData = async () => {
      try {
        //发送请求
        let data = await request.get("/todo");
        setTodos(data);
      } catch (e) {
        
      }
    };
    fetchData();

    // request.get("/todo").then(res => {
    //   console.log(res)
    // }, err => {
    //   console.log(err);
    // })
  }, []);

  return (
    <div className="todo-container">
      <ToastContainer />
      <div className="todo-wrap">
        {/* TodoHeader({addTodo: addTodo}) */}
        <TodoHeader addTodo={addTodo} />
        {/* TodoMain({removeTodo, todos, checkTodo}) */}
        <TodoMain removeTodo={removeTodo} todos={todos} checkTodo={checkTodo} />
        <TodoFooter
          removeDoneTodo={removeDoneTodo}
          todos={todos}
          checkAllTodo={checkAllTodo}
        />
      </div>
    </div>
  );
}
